<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表 -->
    <!-- 3.传给list -->
    <v-List @willUpdate="willUpdate" :list="list" @init="init"></v-List>

    <!-- 弹框 -->
    <!-- 将list传给form 和init传过去-->
    <v-form :status="status" @cancel="cancel" :list="list" @init="init" ref="form"></v-form>
  </div>
</template>

<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqmenulist } from "../../http/api";


export default {
  components: {
    vList,
    vForm
  },
  data() {
    return {
      status: {
        isshow: false, //控制弹框是否出现
        isAdd: true //是添加的弹框还是编辑的弹框
      },
      // 1  初始化一个数组
      list: []
    };
  },
  methods: {
    willAdd() {
      console.log("111");
      this.status = {
        isshow: true,
        isAdd: true
      };
    },
    // 点击了编辑
    willUpdate(id) {
      this.status = {
        isshow: true,
        isAdd: false
      };
      // 通过ref获取子组件的方法和数据
      this.$refs.form.getOne(id)
    },
    cancel() {
      this.status = {
        isshow: false
      };
    },
    init() {
      reqmenulist({
        istree: true
      }).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.list;
        }
      });
    }
  },
  mounted() {
    //   2.一进来就请数据
    this.init();
  }
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
</style>